<template>
  <div class="commidit">
    <ul>
      <li  v-for="(item,index) in info" :key="index">
        <div class="class-type" @click="showList(item)">
           <p class="fs16 c38 fbold">{{item.goodsTypeName}}</p>
           <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/up.png" alt="" class="w10 h10" v-if="item.isOpen == true" />
           <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/down.png" alt="" class="w10 h10" v-else/>
        </div>
        <div class="btf5f6 bbf5f6" v-if="item.isOpen == true">
          <div class="list h85 pt10 pb15 pl10 pr15"
               v-for="(data) in item.companyGoodsResponses"
               :key="data.price"
               @click="select(data)"
               >
            <image class="w60 h60" :src="data.goodsPhoto"></image>
            <div class="list-right">
              <p>{{data.goodsName}}</p>
              <div class="delete">
                <span class="fs12 corange">￥{{data.price}}</span>
                <span class="w20 h20 bradius50p be8" v-if="data.isSelect == false"></span>
                <span class="bgblue w20 h20 bradius50p be8" v-else></span>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="confirm-btn" @click="confirm">
      确认
    </div>
  </div>
</template>

<script>
  import WXAJAX from '../../../utils/request.js';
  import { mapMutations } from "vuex";
  export default {
    data(){
      return{
        downImg:WXAJAX.imgBackUrl + 'yimai_photos/crm/up.png',
        listImg:WXAJAX.imgBackUrl+'/product-index/dynamic.png',
        deleteImg: WXAJAX.imgBackUrl  + '/product-index/20190425173426.png',
        info:'',
        companyId:'',
        arr:[]
      }
    },
    onLoad(option) {
      this.companyId = option.cid
      this.getCompanyGoods()
    },
    watch:{
      info(newVal,oldVal){
        for(var i in newVal){
          this.$set(newVal[i],'isOpen',false)
          var goods = newVal[i].companyGoodsResponses
          for(var j in goods){
            this.$set(goods[j],'isSelect',false)
          }
        }
      },
      arr(newVal,oldVal){
        if(newVal.length > 3){
            newVal[0].isSelect = false
            newVal.shift()
        }
      }
    },
    methods:{
      ...mapMutations(['setSelectGoodsInfo']),
      //获取商品信息
      async getCompanyGoods(){
        try {
          let data = await WXAJAX.POST(
            {companyId:this.companyId},
            "",
            "/customerEssay/queryCompanyGoods"
          );
          if (data) {
            for(var i in data){
              var item = data[i].companyGoodsResponses
              for (var j in item){
                item[j].price = (item[j].price/100).toFixed(2)
                
              }
            }
            this.info = data
          }
          this.isLoading = false;
          wx.hideLoading();
        } catch (error) {
          this.isLoading = false;
          wx.hideLoading();
          // console.log(".............", error);
        }
      },
      //控制list显隐
      showList(item){
        item.isOpen = !item.isOpen
      },
      //选择商品
      select(data){
        data.isSelect = !data.isSelect
        if(data.isSelect == true){
          this.arr.push(data)
        }else{

          //console.log(this.selectdeList.length)
        }
      },
      confirm(){
        this.setSelectGoodsInfo(this.arr);
        uni.navigateBack({
          delta:1
        })
      }
    }
  }
</script>

<style scoped>
  .commidit{
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
  }
  .commidit ul{
    display: flex;
    overflow: auto;
    flex: 1;
    flex-direction: column;
  }
  .class-type{
    box-sizing: border-box;
    height: 88upx;
    padding:20upx 30upx 30upx 20upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .class-type p{
    font-size: ;
  }

  .list{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .list-right{
    width: 490upx;
    font-size: 28upx;
    line-height: 44upx;
    font-weight: 600;
    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 2; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }
  .delete{
    position: absolute;
    width: 490upx;
    bottom: 20upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .confirm-btn{
    height: 98upx;
    line-height: 98upx;
    text-align: center;
    color: #FFFFFF;
    font-size: 36upx;
    background:linear-gradient(90deg,rgba(118,218,217,1),rgba(81,205,204,1));
  }
</style>
